<template>
  <div>
    <div v-if="ishow">
      <div v-for="(item,index) in hotelDetail.data" :key="index">
        <el-row type="flex" justify="space-betweeen" class="hotel_item">
          <!-- 图片 -->
          <el-col :span="8" class="hotel_img">
            <img :src="item.photos" alt />
          </el-col>
          <!-- 酒店信息 -->
          <el-col :span="10" class="hotel_item_info">
            <router-link :to="'/hotel/hotelInfo?id=' + item.id">
              <h4>{{item.name}}</h4>
            </router-link>
            <p class="pinyin">
              {{item.alias}}
              <span>
                <span v-if="item.hotellevel">
                  <i
                    class="iconfont iconhuangguan orange_clor"
                    v-for="(item1,index) in item.hotellevel.level"
                    :key="index"
                  ></i>
                </span>
                {{item.hoteltype.name}}
              </span>
            </p>
            <div class="assess">
              <div class="score">
                <span>
                  <el-rate
                    v-model="item.stars"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}分"
                  ></el-rate>
                </span>
              </div>
              <div class="comment">
                <span class="orange_clor">{{item.common_remarks}}</span>条评论
              </div>
              <div class="diary">
                <span class="orange_clor">6</span>篇游记
              </div>
            </div>
            <div class="postion">
              <i class="iconfont iconlocation"></i>
              {{item.address}}
            </div>
          </el-col>
          <!-- 推荐酒店 -->
          <el-col :span="6" class="recommend">
            <el-table :data="item.products" style="width: 100%" :show-header="false">
              <el-table-column>
                <template slot-scope="scope">
                  <span>{{ scope.row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <span>
                    <i class="orange_clor recommend_price">￥{{ scope.row.price }}</i> 起
                  </span>
                  <i class="el-icon-arrow-right"></i>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
      <el-pagination
        small
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        layout="prev, pager, next"
        :total="hotelDetail.total"
      ></el-pagination>
    </div>
    <div v-if="!ishow" v-loading="loading" style="height:100px">
      <p v-if="!ishow" class="nothingText">暂无符合条件的酒店</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    hotelDetail: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      paginationForm: {
        _start: 0, //从第几条开始显示
        _limit: 10,
      },
      currentPage: 1, //当前的页数
      loading: true,
      ishow: true,
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      this.paginationForm._start =
        (this.currentPage - 1) * this.paginationForm._limit;
      //this.$emit("paginationChange", this.paginationForm);
      this.$router.push({
        query: { ...this.$route.query, _start: this.paginationForm._start },
        path: "/hotel",
      });
    },
  },
  watch: {
    hotelDetail(val) {
      if (val.data.length == 0) {
        this.ishow = false;
        this.loading = false;
        return;
      }
      this.ishow = false;
      this.loading = true;
      setTimeout(() => {
        this.ishow = true;
        this.loading = false;
      }, 2000);
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.orange_clor {
  color: orange;
}
.hotel_item {
  height: 265px;
  padding: 25px 0;
  .hotel_img {
    padding: 0 10px;
    img {
      width: 100%;
      height: 190px;
    }
  }
  .hotel_item_info {
    padding: 0 10px;
    h4 {
      font-weight: 400;
      font-size: x-large;
    }
    .pinyin {
      color: #999;
      margin-bottom: 8px;
    }
    .assess {
      display: flex;
      justify-content: space-between;
      .score {
        i {
          margin: 0;
        }
        .el-icon-star-on {
          font-size: 18px;
          color: rgb(247, 186, 42);
        }
        .score_num {
          font-size: 14px;
        }
      }
      .comment,
      .diary {
        span {
          font-size: 18px;
          padding: 0 5px;
        }
      }
      .diary {
        margin-right: 20px;
      }
    }
    .postion {
      font-size: 14px;
      color: #999;
      margin-top: 10px;
    }
  }
  .recommend {
    .recommend_price {
      font-size: 18px;
    }
  }
}
.nothingText {
  text-align: center;
  line-height: 100px;
  font-size: 20px;
}
</style>